<template>
    <div>
        <van-row>
            <van-col span="2">
                <router-link :to="{path:'/index'}" tag="span"><van-icon name="arrow-left" /></router-link>
            </van-col>
            <van-col span="4" offset="9" style="font-size: 16px"><span style="font-size: 12px"></span></van-col>
            <van-col span="2" offset="7" is-link @click="showPopup"><van-icon name="ellipsis" /></van-col>
        </van-row>
        <van-popup v-model="show"   position="bottom" :style="{ height: '20%' }" class="more">
            <van-col span="6" @click="deletes">
                <van-icon name="close" />
                <p>删除帖子</p>
            </van-col>
            <van-col span="6" @click="change">
                <van-icon name="setting-o" />
                <p>取消</p>
            </van-col>
            <van-col span="6">

            </van-col>
            <van-col span="6">

            </van-col>
        </van-popup>


    </div>
</template>

<script>
    import {deletes, detailList} from "../api/api";
    import {Dialog, Toast} from 'vant';

    export default {
        name: "DetailHeader",
        data(){
            return{
                isMoreShow:false,
                show: false,
                isOverlay:false,
                userId:'',


            }
        },
        created() {
            detailList(this.$route.query.postsId).then(res => {
                console.log(res.data.data.userId)
                this.userId = res.data.data.userId
            })
        },
        methods:{
            showPopup() {
                this.show = true;
            },
            deletes(){
                console.log(this.$store.state.userInfo.userId)
                Dialog.confirm({
                    message: '确认删除？'
                })
                    .then(() => {
                        if(this.userId == this.$store.state.userInfo.userId){
                            deletes(this.$route.query.postsId).then(res => {
                                console.log(res)
                                // alert('删除成功')
                                Toast.success("删除成功");
                                this.$router.push("/index")
                            })
                        }else{
                            // alert("别乱删，不是你的帖子！")
                            Toast.fail("别乱删，不是你的帖子！");
                        }

                        // on confirm
                    })
                    .catch(() => {
                        // on cancel
                    });
            },
            change(){
                Toast.loading({
                    message: '敬请期待...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
            }
        }
    }
</script>

<style scoped>
    .more{
        padding-top: 14%;
        text-align: center;
        font-size: 30px;
        position: fixed;
        background-color: white;
        bottom: 0px;
        right: 0;
        left: 0;
        box-sizing: border-box;
        /*height: 100px;*/
        /*border-top: 2px solid red;*/
        box-shadow: -4px -4px 8px #ccc;
        /*font-size: 16px;*/
        /*line-height: 100px;*/
    }
    >>>.more p{
        font-size: 14px;
        margin: 0;
    }
</style>